import { PureComponent } from 'react';
import {
  Row,
  Col,
  Form,
  Input,
  Modal,
  Radio,
  Select,
} from 'antd';
const FormItem = Form.Item;
const { Option } = Select;
//新增表单
@Form.create()
class CreateForm extends PureComponent {
	
  constructor(props) {
    super(props);
    this.state = {
    	visible: 1,
    }
  }

	okHandle = () => {
		const { form,handleAdd } = this.props;
	    form.validateFields((err, fieldsValue) => {
		        if (err) return;
		    form.resetFields();
		    handleAdd(fieldsValue);
		});
	};
	
	onChange = e => {
		if(e.target.value == 1) {
			this.setState({
				visible: 1,
			})
		}else {
			this.setState({
				visible: 2,
			})
		}
	};
	
	resetButton = () => {
		this.setState({
			visible:1,
		})
	};

  render() {
    const {form, modalVisible,handleModalVisible } = this.props;
    const { visible } = this.state;
return (
    <Modal
width={800}
destroyOnClose
title="新增"
visible={modalVisible}
onOk={this.okHandle}
onCancel={() => handleModalVisible()}
afterClose={() => this.resetButton()}
>
<Form  layout="vertical" >
    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>


        <Col  md={12} sm={24}>
	        <FormItem  label="类型选择">
	            {form.getFieldDecorator('type', {
	            	initialValue: "1",
	            })(
        	      <Radio.Group onChange={this.onChange} buttonStyle="solid">
						        <Radio.Button value="1">菜单</Radio.Button>
						        <Radio.Button value="2">按钮</Radio.Button>
			      		</Radio.Group>
	            )}
	        </FormItem>
        </Col>
		

    </Row>
	{visible == 1?(
		<div>
	    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
	
	
	        <Col  md={12} sm={24}>
		        <FormItem  label="菜单名称">
		            {form.getFieldDecorator('text', {
		            rules: [{ required: true, message: '请输入菜单名称！', min: 1 }],
		            })(<Input placeholder="请输入" />)}
		        </FormItem>
	        </Col>
	
	
	
	        <Col  md={12} sm={24}>
		        <FormItem  label="链接">
		            {form.getFieldDecorator('href', {
		            rules: [{ required: true, message: '请输入链接！', min: 1 }],
		            })(<Input placeholder="请输入" />)}
		        </FormItem>
	        </Col>
			
	
	
	    </Row>

	    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
	
	        <Col  md={12} sm={24}>
		        <FormItem  label="国际化菜单名">
		            {form.getFieldDecorator('i18n_name', {
		            rules: [{ required: true, message: '请输入国际化菜单名！', min: 1 }],
		            })(<Input placeholder="请输入" />)}
		        </FormItem>
	        </Col>
	        <Col md={12} sm={24}>
		        <FormItem label="状态">
		            {form.getFieldDecorator('enable',{
		            	initialValue: "1",
		            })(
		                <Select placeholder="请选择" style={{ width: '100%' }}>
		                    <Option value="1">可用</Option>
		                    <Option value="0">禁用</Option>
		                </Select>
		            )}
		        </FormItem>
	        </Col>

	
	    </Row>
	  	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
	    
			<Col  md={12} sm={24}>
		        <FormItem  label="路由组件">
		            {form.getFieldDecorator('component', {
		            rules: [{ required: false, message: '请输入路由组件！', min: 1 }],
		            })(<Input placeholder="请输入" />)}
		        </FormItem>
	        </Col>
	        <Col  md={12} sm={24}>
		        <FormItem  label="路由重定向">
		            {form.getFieldDecorator('redirect', {
		            rules: [{ required: false, message: '请输入路由重定向！', min: 1 }],
		            })(<Input placeholder="请输入" />)}
		        </FormItem>
	        </Col>

	
	    </Row>
	    </div>	
	):(
		<Row gutter={{ md: 8, lg: 24, xl: 48 }}>


	        <Col  md={24} sm={48}>
		        <FormItem  label="按钮名称">
		            {form.getFieldDecorator('text', {
		            rules: [{ required: true, message: '请输入按钮名称！', min: 1 }],
		            })(<Input placeholder="请输入" />)}
		        </FormItem>
	        </Col>
	
			
	
	
	    </Row>
	)}
	

    
</Form>
</Modal>
);
  }

}

export default CreateForm;
